<template>
<div class="news">
  <div class="news_bg">
    产业链资讯
  </div>
  <div class="tabBox">
    <div class="tab" @click='changeType(item.id)' :class="active==item.id?'tabActive':''" v-for="item in type" :key='item.id'>{{item.name}}</div>
  </div>
  <div class="content_l">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了~"
      @load="onLoad"
    >
      <div class='l_item' v-for="item in list" :key='item.id' @click="toDetail(item.id)">
        <img :src="item.thumbnail" alt="">
        <div class='news_c'>
          <div class='title'>{{item.post_title}}</div>
          <div class='time'>
            <div><Icon class='icon_t' type="md-time" />{{item.create_time}}</div>
            <div><Icon class='icon_t' type="md-eye" />{{item.post_hits}}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</div>
</template>
<script>
import { newsType, newsList } from "@/api/api.js"

export default {
  data(){
    return{
      type:['最新咨询','最热资讯'],
      active:'',
      page:0,
      total:0,
      list:[],
      loading:false,
      finished:false,
    }
  },
  async created(){
    await this.getNews()
    this.onLoad()
  },
  mounted(){
  },
  methods:{
    onLoad(){
      if(!this.active){
        return
      }
      this.page+=1
      this.getList()
    },
    getNews(){
      return newsType().then(res=>{
        this.type=res.data
        this.active=res.data[0].id
      })
    },
    changeType(id){
      this.finished=false
      this.active=id
      this.page=1
      this.getList()
    },
    getList(){
      this.loading=true
      newsList({type_id:this.active,page:this.page}).then(res=>{
        if(this.page>1){
          this.list=this.list.concat(res.data.data)
        }else{
          this.list=res.data.data
        }
        this.total=res.data.total
        this.loading=false
        if(this.total == this.list.length){
          this.finished=true
        }
      })
    },
    pageChange(val){
      this.page=val
      this.getList()
    },
    toDetail(id){
      this.$router.push({name:'detail',query:{id}})
    }
  }
}
</script>
<style lang="scss" scoped>
.news{
  position: fixed;
  height:100%;
  width:100%;
  background:#fff;
  overflow: auto;
  padding-bottom:60px;
  z-index: 1000;
  .news_bg{
    background: url(~@a/img/news.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 180px;
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 20px;
    color: #fff;
    position: relative;
    font-weight: 700;
    padding-top:70px;
  }
  .content_l{
    .l_item{
      padding:10px;
      display:flex;
      margin:10px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      .news_c{
        width: 100%;
        position: relative;
      }
      img{
        min-width: 120px;
        max-width: 120px;
        min-height: 80px;
        max-height: 80px;
        margin-right:10px;
      }
      .title{
        font-size: 15px;
        font-weight:700;
        margin-bottom: 1rem;
        text-align: left;
        color: #333;
      }
      .time{
        margin-top:20px;
        text-align:right;
        position:absolute;
        right: 0;
        bottom:0px;
        color: #888;
        .icon_t{
          font-size: 14px;
          margin-right: 5px;
        }
        div{
          display: inline-block;
          margin-left: 20px;
          font-size: 12px;
        }
      }
    }
  }
}
.onpage{
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}
.none{
  text-align: center;
  margin: 100px;
  font-size: 38px;
}
.tabBox{
  text-align: center;
  height: 50px;
  background: rgb(247, 255, 254);
  box-shadow: 0 0 0.375rem 0 rgba(0 ,0 ,0 , .1);
  overflow-x: auto;
  white-space: nowrap;
  .tabActive{
    font-size: 1.125rem;
    font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
    font-weight: 700;
    color: #2091d3 !important;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      bottom: 6px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 4rem;
      height: 2px;
      background: #2091d3;
    }
  }
  .tab{
    display: inline-block;
    padding: 0 5px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI;
    color: #666;
    position: relative;
    cursor: pointer;
  }
}
</style>